<template>
  <div>
    <img style="position: fixed;height: 100%;width: 100%;top: 0;left: 0;background-size: 100% 100%;" src="../../../static/img/8.jpg" />
    <x-header  style="background: rgba(255,255,255,0);font-size:17px" :left-options="{backText: ''}"><p style="color: #fff;">展示海报</p></x-header>
    <div class="card">
      <!--<div class="card-switch-title">展示个性名片</div>x-->
      <x-switch title="展示个性名片" class="card-switch" v-model="detail.status" />
      <div style="width:4.5rem;margin-left: auto">
        <x-button class="card-edit" plain mini type="primary" @click.native="edit" >编辑名片</x-button>
      </div>

    </div>
    <div style="width: 70%;padding: 0 15%">
      <swiper style="width:100%" height="27.85rem" :show-dots="false" :auto="false" v-model="currentIndex" @on-index-change="slide" :custom="true" overflow="visible">
        <swiper-item v-for="(item,index) in list" :key="index" v-if="index === currentIndex || index === currentIndex + 1 || index === currentIndex + 2 || index === currentIndex - 1 || index === currentIndex - 2">
          <img class="swiper-poster" :src="item.img" />
          <div v-if="detail.status" class="swiper-poster-card" >
            <p class="swiper-poster-card-name">{{detail.name}}</p>
            <p class="swiper-poster-card-phone">{{detail.mobile}}</p>
          </div>
        </swiper-item>
      </swiper>
    </div>
    <x-button class="save" plain @click.native="saveToAlbum">保存到本地</x-button>
    <div v-if="showCard" class="edit">
      <div class="edit-model">
        <img class="edit-close" src="../../../static/img/close.png" @click="close" />
        <div class="edit-title">名片编辑</div>
        <div class="edit-input-name" >
          <x-input style="padding-right: 0;padding-left: 0" placeholder="请输入姓名" type="text" :max="4" v-model="detail.name" />
        </div>
        <div class="edit-input-mobile">
          <x-input style="padding-right: 0;padding-left: 0" placeholder="请输入手机号" mask="99999999999" :max="11" v-model="detail.mobile" />
        </div>
        <div class="edit-save">
          <x-button class="edit-save-button" type="primary" @click.native="editPosterHandle">保存</x-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserPosterList, editPoster } from '@/api/user'
import html2canvas from 'html2canvas'

export default {
  name: 'index',
  components: {
  },
  data () {
    return {
      list:[
        {
          img: require('../../../static/img/1.png'),
        },
        {
          img: require('../../../static/img/2.jpg'),
        },
        {
          img: require('../../../static/img/3.jpg'),
        },
      ],
      currentIndex:0,
      showCard: 0,
      detail: { id: '',name:'',mobile:'',status: 0 },
      posterId: 1
    }
  },
  methods: {
    slide(index) {
      console.log(index)
    },
    edit () {
      this.showCard = 1
    },
    close () {
      this.showCard = 0
    },
    editPosterHandle () {
      editPoster({id:this.detail.id, cid: this.globalData.cid, posterId: this.posterId,name:this.detail.name, mobile: this.detail.mobile, status: this.detail.status?1:0}).then(()=>{
        this.showCard = 0
        this.$vux.toast.show({
          text: '修改成功',
          type: 'success'
        })
      })
    },
    saveToAlbum () {
      let alink = document.createElement("a");
      alink.href = this.imageUrl;
      alink.download = "loan_poster"; //图片名
      alink.click();
    }
  },
  mounted () {
    getUserPosterList(this.globalData.cid).then(data => {
      data.status = !!data.status
      this.detail = data
    })
  }
}
</script>

<style scoped>
.card {
  display: flex;
  padding: 0 3.5rem;
}
.swiper-poster {
  width: 100%;
  height: 100%;
}
.swiper-poster-card {
  position: absolute;
  left: 0;top: 23.2rem;
  background: rgba(0,0,0,0.40);
  width: 100%;
  height: 45px;
  color: rgba(255,255,255,0.80);
  line-height: 45px;
}
.swiper-poster-card-name {
  padding-left: 15px;
  display: inline
}
.swiper-poster-card-phone {
  padding-left: 10px;
  display: inline
}
.card-switch {
  display: flex;
  z-index: 1;
  color: #fff;
  line-height: 32px;
  font-size: 14px;
  color: rgba(255,255,255,0.80);
}
.card-edit {
  border: 1px solid #fff;
  border-radius: 3px;
  color: #fff;
  height: 24px;
  width: 4.5rem;
  line-height: 22px;
  padding: 0;
  margin: 10px 0;
}
.save {
  border: 1px solid #fff;
  border-radius: 3px;
  margin: 2.5rem 4rem 0;
  color: #fff;
  line-height: 43px;
  width: 18.6rem;
}
.edit {
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.40);
}
.edit-close {
  position: absolute;
  top: 9rem;
  right: 4.07rem;
  height: 1.57rem;
  width: 1.57rem;
}
.edit-model {
  margin: 11.71rem auto 0;
  padding: 1.07rem 1.43rem;
  /*height: 13.71rem;*/
  width: 15.71rem;
  border-radius: 14px;
  background: #fff;
}
.edit-title {
  color: #8D8D8D;
  text-align: center;
}
.edit-input-name {
  margin-top: 1.5rem;
  border-bottom: 1px solid #F0F0F0;
}
.edit-input-mobile {
  margin-top: 0.36rem;
  border-bottom: 1px solid #F0F0F0;
}
.edit-save-button {
  margin-top: 1.7rem;
  height: 40px;
  width: 15.7rem;
  background: #F14E2C;
  line-height: 38px;
  font-size: 1rem;
}

</style>
